<template>
	<view class="loginBox">
		<view class="login_form">
			<view class="login_form_title">你好, 朋友</view>
			<u-field placeholder-style="font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;" class='input_style' icon="account-fill" :border-bottom="false" v-model="account" label=""
				label-width='0' placeholder="请输入账号">
			</u-field>
			<u-field placeholder-style="font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;" class='input_style' icon="lock-fill" :type="isShow ? 'password' : 'text'" :border-bottom="false" v-model="psd" label=""
				label-width='0' placeholder="请输入密码">
				<template #right>
					<view class="" @click="changeShow">
						<u-icon v-if="isShow" name="eye-fill" :size="40"></u-icon>
						<u-icon v-else name="eye-off" :size="40"></u-icon>
					</view>
				</template>
			</u-field>
			
			<view class="login_form_btn">
				<view class="login_form_btn_real">登录</view>
				<view class="login_form_btn_shadow"></view>
			</view>
			<view class="login_form_tool">
				<view class="tool_register" @click="toRegist">注册</view>
				<view class="tool_reset" @click="toReset">忘记密码</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				psd: '',
				isShow: false
			}
		},
		methods: {
			loginCallback() {
				const app = getApp()
				app.token = 'response.accessToken';
				app.isLogin = "isLogin"
				wx.setStorageSync('token', 'response.accessToken')
			},
			changeShow() {
				this.isShow = !this.isShow
			},
			toRegist() {
				uni.navigateTo({
					url: '/pages/regist/regist'
				})
			},
			toReset() {
				uni.navigateTo({
					url: '/pages/reset/reset'
				})
			}
		}
	}
</script>

<style lang="scss">
	.loginBox {
		width: 100%;
		height: 100%;
		background: url(../../static/login_bg@2x.png);
		background-size: 100%;

		.login_form {
			width: 100%;
			padding-top: 585rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.login_form_title {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				padding-bottom: 80rpx;
			}

			.input_style {
				width: 702rpx;
				height: 90rpx;
				background: #F5F5F5;
				border-radius: 128rpx 128rpx 128rpx 128rpx;
				// padding-bottom: 10rpx;
				border-bottom: none;
				margin-bottom: 40rpx;
			}
			.login_form_btn {
				width: 702rpx;
				
				position: relative;
				.login_form_btn_real {
					
					position: relative;
					z-index: 10;
					width: 100%;
					height: 80rpx;
					background: #509A80;
					box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
					border-radius: 128rpx 128rpx 128rpx 128rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.login_form_btn_shadow {
					width: 702rpx;
					height: 80rpx;
					background: url(../../static/btn_shadow@2x.png);
					background-size: 100% 100%;
					position: absolute;
					top: 40rpx;
					left: 0;
					// right: 0;
					// margin: auto;
					// z-index: 100;
				}
			}
			.login_form_tool{
				width: 702rpx;
				display: flex;
				justify-content: space-between;
				padding-top: 70rpx;
				.tool_register {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #509A80;
				}
				.tool_reset {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #509A80;
				}
			}
		}
	}
</style>